<template>
<div class="lyx-event-info">

<el-row>
	<el-col :span="10">
	<el-form ref="form" :model="obj" label-width="130px">

		<el-form-item label="事件类型："  >
			{{obj.info.event_type == '1' ? '企业事件' : '普通事件'}}
		</el-form-item>

		<el-form-item v-if="obj.info.event_type == '1'" label="企业名称："  >
			{{obj.info.qy_name}}
		</el-form-item>

		<el-form-item label="问题类型："  >
			{{obj.info.question_type_name}}
		</el-form-item>

		<el-form-item label="问题描述："  >
			{{obj.info.question_title}}
		</el-form-item>

		<el-form-item label="上报网格名称："  >
			{{obj.info.company_name}}
		</el-form-item>


		<el-form-item label="网格员："  >
			{{obj.info.release_name}}
		</el-form-item>

		<el-form-item label="网格员电话："  >
			{{obj.info.mobile}}
		</el-form-item>

		<el-form-item label="经度："  >
			{{obj.info.event_longitude}}
		</el-form-item>

		<el-form-item label="纬度："  >
			{{obj.info.event_latitude}}
		</el-form-item>

	</el-form>

	</el-col>

	<el-col :span="14">
		<el-container style="height: 470px; ">
		<el-main>
		<el-timeline>
			<el-timeline-item
			v-for="(item, index) in obj.flow"
			:key="index"
			:timestamp="item.handle_time"
			placement="top"
			:icon="item.status == '1' ? 'el-icon-check' : undefined "
			type='primary'
			size="large"
			>
			<el-card style="width:400px;">
			<p>经办人员：{{item.name}}</p>
			<p>处理意见：{{item.paramsobj.content}}</p>
			<p>状态：{{status_label[parseInt(item.status)]}}</p>
			<p><el-button type="text" size="small" @click="fujian(item)">查看附件</el-button></p>
			</el-card>
			</el-timeline-item>
		</el-timeline>
		</el-main>
		</el-container>
	</el-col>


	<!-- <el-col :span="24">
	<el-form ref="form" :model="obj" label-width="180px">

		<el-form-item label="位置："  >
			经度：{{obj.info.event_longitude}} <span class="ml10">纬度：{{obj.info.event_latitude}}</span>
		</el-form-item>

		<el-form-item label="图片："  >
			<img v-for="(item, index) in obj.info.imgs" :key="index" 
			:src="'/gridfile/' + item" width="200" height="200" style="margin-right:10px;" class="pointer" @click="showImg('/gridfile/' + item)">
		</el-form-item>

		<el-form-item label="视频："  >
			<video-player  
			v-for="(item, index) in obj.info.videos" :key="index" 
			class="video-player-box"
                 ref="videoPlayer"
                 :options="{
					muted: true,
					language: 'zn',
					playbackRates: [0.7, 1.0, 1.5, 2.0],
					sources: [{
						type: 'video/mp4',
						src: '/gridfile/' + item
					}],
					width : 400,
				 }"
                 :playsinline="true"
                 customEventName="customstatechangedeventname"
            >
  			</video-player>
		</el-form-item>

	</el-form>
	</el-col> -->

</el-row>

<el-dialog :visible.sync="dialogVisible" 
append-to-body title="附件列表" width="30%">
  <el-table :data="arr" size="mini">
    <el-table-column label="类型" >
    	<template slot-scope="scope">
      		<span v-if="scope.row.type == 'img'">图片</span>
      		<span v-if="scope.row.type == 'video'">视频</span>
      		<span v-if="scope.row.type == 'text'">意见</span>
      	</template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="130">
      	<template slot-scope="scope">
      		<el-button type="text" size="mini"
      		@click="showImg(scope.row)">
      			查看
      		</el-button> &nbsp;&nbsp;
      		<!-- <el-button type="danger" size="mini" 
      		icon="el-icon-download" circle
      		@click="download(scope.row)">
      		</el-button> -->

      		<a class='download' :href="'http://grid.tripln.top/gridfile/' + scope.row.value" download=""  title="下载">下载</a>
      		<!-- <el-button type="danger" size="mini" 
      		icon="el-icon-delete" circle
      		@click="del(scope.row)">
      		</el-button> -->
      	</template>
    </el-table-column>
    <!-- <el-table-column property="name" label="姓名" width="200"></el-table-column> -->
    <!-- <el-table-column property="address" label="地址"></el-table-column> -->
  </el-table>

  <br>
</el-dialog>

<el-dialog :visible.sync="imgDialogVisible" append-to-body title="查看图片">
  <img width="100%" :src="dialogImageUrl" class="mb20" alt="">
</el-dialog>


<el-dialog :visible.sync="videoDialogVisible" append-to-body title="查看视频" width="400px">
  <video-player  
	class="video-player-box"
         ref="videoPlayer"
         :options="{
			muted: true,
			language: 'zn',
			playbackRates: [0.7, 1.0, 1.5, 2.0],
			sources: [{
				type: 'video/mp4',
				src: dialogVideoUrl
			}],
			width : 360,
		 }"
         :playsinline="true"
         customEventName="customstatechangedeventname"
    >
	</video-player>
	<br>
</el-dialog>



</div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	
	name : 'eventInfo',
	
	data () {
		return {
			dialogVisible : false,
			imgDialogVisible : false,
			videoDialogVisible : false,
			dialogImageUrl : '',
			dialogVideoUrl : '',
			status_label : ['处理中', '完成'],
			is_supervise_label : ['否', '是'],

			current : {},

			arr : [],
		}
	},

	props : {
		obj: {
			type: Object,
			default () {
				return {}
			},
		}
	},

	components : {
		
	},

	computed : {
		...mapGetters([
			
		]),
	},

	methods : {
		showImg (item) {
			console.log(item);
			this.dialogImageUrl = '';
			this.dialogVideoUrl = '';
			if(item.type == 'img'){
				this.dialogImageUrl = '/gridfile/' + item.value;
				this.imgDialogVisible = true;
			}else if(item.type == 'video'){
				this.dialogVideoUrl = '/gridfile/' + item.value;
				this.videoDialogVisible = true;
			}
		},

		download (item) {
			window.location.href = 'http://grid.tripln.top/gridfile/' + item.value;
		},

		fujian (item) {


			console.log('flow');
			console.log(this.obj.flow);

			console.log(item);
			this.arr = [];
			this.$http({
				fun : 'flowInfo',
				id : item.id,
				cb : res => {
					console.log('flowInfo');
					console.log(res);

					if(res.params == undefined){
						res.params = [];
					}else{
						res.params.forEach(o1 => {
							if(o1.type == 'img' && o1.value != null){
								o1.value.split(',').forEach(o2 => {
									this.arr.push({
										type : 'img',
										value : o2,
									});
								})
							}else if(o1.type == 'video' && o1.value != null){

								this.arr.push(o1);
								// o1.value.split(',').forEach(o2 => {
								// 	this.arr.push({
								// 		type : 'video',
								// 		value : o2,
								// 	});
								// })
							}
						});
					}

					this.current = {
						...res,
						id : item.id,
					};

					//this.arr = this.current.params;

					console.log(this.current);
					this.dialogVisible = true;
				}
			});

		},
	},

	watch : {
	    
	},

	mounted () {
		
	},

}
</script>

<style scoped>
.vjs_video_3-dimensions {
    /*width: 400px;*/
    /*height: 1920px;*/
  }
/*    .lyx-event-info>>> .el-form-item__label{
        font-weight: bold;
    }*/
</style>
